<template>
    <div>
        <h3>公式编辑</h3>
        <el-button @click="handleClick">应用</el-button>
        <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="性别">
                <el-radio-group v-model="formData.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
                <el-button @click="handleEdit('sex')">公式编辑</el-button>
            </el-form-item>
            <el-form-item label="爱好">
                <el-select v-model="formData.hobby" placeholder="请选择" width="120px">
                    <el-option v-for="item in hobbyList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <el-button @click="handleEdit('hobby')">公式编辑</el-button>
            </el-form-item>

        </el-form>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" class="custom-dialog">
            <FormulaEditor :attr-list="attrList" :attr-data="attrData" :formula-list="formulaList"
                :value="form.value.formula" @handle-cancel="dialogVisible = false" @handle-save="handleFormulaSave">
            </FormulaEditor>
        </el-dialog>

    </div>
</template>

<script>
import FormulaEditor from './FormulaEditor.vue'
export default {
    components: {
        FormulaEditor
    },
    data () {
        return {
            formData: {
                sex: '',
                hobby: ''
            },
            hobbyList: [
                {
                    label: '游戏',
                    value: 'yx'
                },
                {
                    label: '健身',
                    value: 'js'
                },
                {
                    label: '画画',
                    value: 'hh'
                },
                {
                    label: '跳舞',
                    value: 'tw'
                }
            ],
            dialogVisible: false,
            attrList: [
                {
                    id: 'sex',
                    name: '性别',
                    value: {
                        type: 'select'
                    },
                    configure: {
                        value: '', // 字段名
                        type: 2,
                        source: '',
                        source_object_id: '',
                        display_columns: {
                            key: '123'
                        },
                        result_columns: {
                            key: ''
                        }
                    }
                },
                {
                    id: 'hobby',
                    name: '爱好',
                    value: {
                        type: 'select'
                    },
                    configure: {
                        value: '', // 字段名
                        type: 2,
                        source: '',
                        source_object_id: '',
                        display_columns: {
                            key: '123'
                        },
                        result_columns: {
                            key: ''
                        }
                    }
                }

            ],
            attrData: {},
            formulaList: ['sex', 'hobby'],
            form: {
                value: {
                    formula: ''
                }
            }
        }
    },
    computed: {},
    watch: {},
    methods: {
        handleClick () {
            let res = this.form.value.formula
            let varCombination = res.match(/\${.*?\}/g)
              if (varCombination) {
                varCombination.forEach(variable => {
                    let newStr = variable.slice(2, -1)
                    res = res.replace(variable, `this.formData['${newStr}']`)
                })
            }
            console.log(res)
            // eslint-disable-next-line no-eval
            eval(res)
            console.log(this.formData)
        },
        handleEdit (key) {
            this.dialogVisible = true
        },
        /**
             * @description 保存公式编辑
             */
        handleFormulaSave (value) {
            console.log(value)
            this.form.value.formula = value
            this.dialogVisible = false
        }
    },
    created () { },
    mounted () { }
}
</script>
<style lang="less">
.custom-dialog {
    .el-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        height: calc(100vh - 40px);

        .el-dialog__body {
            height: calc(100% - 54px);
        }
    }
}
</style>
<style lang='less' scoped></style>
